<template>
    <div>
        <!-- 角色管理 -->
        <div class="all-container">
            <!-- 功能栏 -->
            <el-row>
                <el-col :span="24" class="table-fun">
                    <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="getCharList">刷新</div>
                    <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="modWin=true;winTitle='添加'">添加</div>
                    <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="modWin=true;winTitle='修改'">修改</div>
                    <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="del">删除</div>
                </el-col>
            </el-row>
            <!-- 表格栏 -->
            <avue-crud :data="charList.data" :option="charList.option" @current-row-change="rowChange" :page="charList.page" @current-change="chartPage"></avue-crud>
        </div>
        <!-- 修改弹窗 -->
        <div v-show="modWin" class="addModal">
                <!-- 标题栏 -->
                <el-row class="add-title">
                     <div class="closeWin" @click="closeModWin">X</div>
                    <el-col :span="24">
                        <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">{{winTitle}}</span>
                    </el-col>
                </el-row>
                <!-- 表单栏 -->
                <el-row class="form-container">
                    <el-col :span="24">
                        <!-- 第一行 -->
                        <el-row class="org-rows">
                            <el-col :span="24">
                                <div class="lf choose-title org-title">角色名</div>
                                <el-input v-model="charName" placeholder="" size="mini" style="width:150px;" class="lf choose-input org-input"></el-input>
                                <div class="lf choose-title org-title">等级</div>
                                <el-input v-model="level" placeholder="" size="mini" style="width:150px;" class="lf choose-input org-input"></el-input>
                            </el-col>
                        </el-row>
                        <!-- 第二行 -->
                        <el-row class="org-rows">
                            <el-col :span="24">
                                <div class="lf">
                                    <div class="choose-title org-title">权限&nbsp;&nbsp;&nbsp;</div>
                                </div>
                                <div class="lf dataSet-container">
                                    <table border="0" cellpadding="0" cellspacing="0">
                                        <thead>
                                            <td class="navList choose-title check-head">菜单列表</td>
                                            <td class="choose-title check-head">功能权限</td>
                                        </thead>
                                        <tbody class="choose-table">
                                            <tr v-for="(item,i) of detailList">
                                                <td class="choose-title check-title check-row">
                                                    {{item.name}}
                                                </td>
                                                <td>
                                                    <tr>
                                                        <td class="check-row" style="width:553px">
                                                            <!-- <el-checkbox v-model="bool" v-for="item of detailList[i]">{{item}}</el-checkbox> -->
                                                             <el-checkbox-group v-model="bool">
                                                              <el-checkbox v-for="itemII of item.children" :value="itemII.id">{{itemII.name}}</el-checkbox>
                                                            </el-checkbox-group>
                                                        </td>
                                                    </tr>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <!-- 按钮 -->
                <button class="check-btn rf" @click="cancelMod">
                <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                <button class="check-btn rf" @click="winTitle=='添加'?add():mod()"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确认</button>
            </div>
    </div>
</template>

<script>
import qs from "qs";
import TableData from "../../components/common/tableData"
export default {
  data: function() {
    return {
      charList: {
        page: {
          pageSizes: [10],
          total: 20,
          currentPage: 1,
          pageSize: 10,
        },
        data:[],
        option:{
          highlightCurrentRow:true,
          page:true,
          align:'center',
          menu:false,
          menuAlign:'center',
          column:[
            {
              label:"角色名",
              prop:"name"
            },
            {
              label:"等级",
              prop:"rank_level"
            },
          ]
        }
      },
      delID: { id: "132" },
      modWin: false,
      charName: "",
      level: "",
      modelList: [],
      detailList: [],
      checkTag: [],
      detailCheckTag: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      chooseAll: false,
      bool: [],
      boollist:[],
      currentRow:"",
      winTitle:"test"
    };
  },
  methods: {
    chartPage(val){
      this.charList.page.currentPage=val;
      this.getCharList();
    },
    getCharList() {
      this.postRequest("/sys/role/list",{
        rows:10,
        page:this.charList.page.currentPage
      }).then(data => {
        this.charList.page.total=data.data.totalRow;
        this.charList.data=data.data.list;
      });
    },
    refresh() {
      this.getCharList();
    },
    add() {
      this
        .getRequest(
          "/sys/role/add?sysRole.id=&sysRole.name="+this.charName+"&sysRole.rank_level="+this.level+"&res_ids=1%2C301"
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getCharList();
            this.modWin=false;
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    mod() {
      this.getRequest("/sys/role/update?sysRole.id="+this.currentRow.id+"&sysRole.name="+this.charName+"&sysRole.rank_level="+this.level+"&res_ids=1%2C5%2C148%2C301%2C302").then(data=>{
        this.msgShow(data,this.closeModWin)
      })
    },
    closeModWin() {
      this.modWin = false;
    },
    cancelMod() {
      this.modWin = false;
    },
    del() {
      this
        .postRequest(
          "/sys/role/del",{
            id:this.currentRow.id
          }
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getCharList();
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    getModalList() {
      this.modelList = [];
      this
        .postRequest("/sys/permission/tree")
        .then(data => {
          for (var item of data.data) {
            this.modelList.push({
              label: item.name
            });
          }
        });
    },
    getTagList() {
      for (var item of modelList) {
        this.getTagList.push(false);
      }
    },
    getDetailList() {
      this
        .postRequest("/sys/permission/tree")
        .then(data => {
          // console.log(data);
          this.detailList=data.data;
          console.log(this.detailList);
        });
    },
    rowChange(val){
      this.currentRow=val;
      this.charName=val.name;
      this.level=val.rank_level;
      if(this.winTitle=='添加'){
        this.charName="";
        this.level="";
      }
    }
  },
  computed: {},
  components:{TableData},
  watch: {
    winTitle(){
      if(this.winTitle=='添加'){
        this.charName="";
        this.level="";
      }
    }
  },
  mounted() {
    console.log("charaterManage");
    this.getCharList();
    this.getModalList();
    this.getDetailList();
    this.$emit("sendActive", "2-3");
  }
};
</script>
<style scoped src="../../assets/css/allManage/charaterManage.css">

</style>